/*
 * @Author       : 邱狮杰
 * @Date         : 2021-05-19 09:31:06
 * @LastEditTime : 2021-05-19 14:06:50
 * @FilePath     : /wedding-dress-selection/src/page/test/index.tsx
 * @Description  :
 */
import { useRef } from 'react'
import SwiperCore, { Virtual } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.scss'

SwiperCore.use([Virtual])

const Test = () => {
  // Create array with 1000 slides
  const slides: string[] = Array.from({ length: 5000 }).map((el, index) => `Slide ${index + 1}`)

  return (
    <Swiper slidesPerView={6} virtual>
      {slides.map((slideContent, index) => {
        return (
          <SwiperSlide key={slideContent} virtualIndex={index}>
            {slideContent}
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

const RefTest = () => {
  const r = useRef(1)
  return (
    <div>
      <h1>{r.current}</h1>
      <button
        onClick={() => {
          r.current++
        }}>
        add
      </button>
    </div>
  )
}
export default RefTest
